Problem

The sales/contact form and video embed pages had inconsistent coloring — several elements used blueish-grey colors from old shadcn defaults (border-input, bg-background, ring-ring, default border) instead of the site's warm-grey semantic tokens.

Specifically:

• Textarea fields (message, additional notes) had blueish-grey borders, backgrounds, and focus rings
• Checkbox container border was blueish-grey
• Native checkboxes used browser-default blue when checked
• Video embed panels on /watch-demo had blueish-grey borders from the default border class

Changes

components/ui/textarea.tsx

Replaced old shadcn tokens with the site's semantic design tokens to match Input and SelectTrigger:

• border-input → border-line-structure
• bg-background → bg-surface-bg
• ring-ring / ring-offset-background → ring-line-cta / ring-offset-surface-bg
• placeholder:text-muted-foreground → placeholder:text-text-disabled
• rounded → rounded-[2px] (consistent with Input/Select)
• Added text-text-secondary and shadow-sm

components/ContactSalesForm.tsx

• Checkbox container: border-input → border-line-structure, rounded-md → rounded-[2px]
• Native checkbox inputs: added accent-line-cta so checked state uses the site's CTA color, changed border to border-line-structure

components/watchOrBookDemo/WatchWalkthroughs.tsx

• Video tab content panels: replaced default border (blueish-grey --border variable) with border border-line-structure
• Added corner-box-corners for consistent decorative bracket corners matching CTA boxes
• Removed rounded in favor of the corner-box style
• Aligned iframe border-radius to rounded-[2px]

Resolves LFE-9413

Linear Issue: LFE-9413

  

Disclaimer: Experimental PR review

Greptile Summary

This PR aligns the /talk-to-us sales form's textarea and checkbox elements with the site's warm-grey semantic design tokens, replacing leftover shadcn defaults (border-input, bg-background, ring-ring) to match how Input and SelectTrigger are already styled. The changes are cosmetic-only and well-scoped.

Confidence Score: 4/5

Safe to merge — purely cosmetic token swap with no logic changes.

Only P2 findings: a slightly reduced focus ring in textarea and no-op border/radius classes on a native checkbox. No logic, data, or security concerns.

No files require special attention; both changes are isolated styling updates.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Textarea / Checkbox render"] --> B{"Token source"}
    B -->|"Before (shadcn defaults)"| C["border-input\nbg-background\nring-ring\nring-offset-background\nplaceholder:text-muted-foreground"]
    B -->|"After (semantic tokens)"| D["border-line-structure\nbg-surface-bg\nring-line-cta\nring-offset-surface-bg\nplaceholder:text-text-disabled\naccent-line-cta"]
    D --> E["Consistent warm-grey styling\nmatches Input & SelectTrigger"]

This is a comment left during a code review.
Path: components/ui/textarea.tsx
Line: 12

Comment:
**Reduced focus ring may affect keyboard accessibility**

The focus ring was shrunk from `ring-2 ring-offset-2` to `ring-1 ring-offset-1`. A 1 px ring with 1 px offset is quite small and may fall short of WCAG 2.4.11 (Focus Appearance) which requires the focus indicator to have a minimum perimeter and area. If the site's other refreshed inputs (e.g. `Input`, `SelectTrigger`) also use `ring-1`, this is consistent and fine — but if they still use `ring-2`, consider keeping `ring-2 ring-offset-2` here for consistency and accessibility.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: components/ContactSalesForm.tsx
Line: 279

Comment:
**`border-*` and `rounded-[2px]` have no effect on native checkboxes**

Native `<input type="checkbox">` elements ignore `border-*` and `border-radius` CSS in most browsers unless `appearance: none` (or `-webkit-appearance: none`) is also applied; the OS/browser renders its own chrome. `accent-line-cta` is the right way to colour the checked state (good call), but `border-line-structure` and `rounded-[2px]` will be silently ignored visually. The original `border-input` had the same limitation, so this is pre-existing — just worth knowing these classes are inert unless you add `appearance-none` later.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "fix: align sales form colors with websit..." | Re-trigger Greptile}